<template>
    <div>
        <!-- 项目的最外层 -->
        <!-- 头部搜索模块 -->
        <TypeNav />

        <!-- 轮播图模块 -->
        <ListContainer />

        <!-- 今日推荐 -->
        <Recommand />

        <!-- 排名 -->
        <Rank />

        <!-- 楼层图 -->
        <Floor v-for="item in floorList" :key="item.id" :floorItem="item" />


        <!-- 猜你喜欢 -->
        <Like />


        <!-- 品牌 -->
        <Brand />



    </div>
</template>

<script setup lang="ts">
import ListContainer from './ListContainer/index.vue'
import Recommand from './Recommend/index.vue'
import Floor from './Floor/index.vue'
import Brand from './Brand/index.vue'
import Like from './Like/index.vue'
import Rank from './Rank/index.vue'

import {reqBannerList,reqFloorList} from '@/api/homeMock'
import type { IFloorListItem } from '@/types/homeMock';
import { onMounted, ref } from 'vue'
import useHomeStore from '@/stores/homeStore'
import { storeToRefs } from 'pinia'

const homeStore = useHomeStore()
const {floor} = storeToRefs(homeStore)

//创建楼层数据
const floorList = ref<IFloorListItem[]>([])



//获取首页楼层图
const getFloorList = async ()=>{
    const res = await reqFloorList()
    if(res.code === 200){
        // console.log(res)
        floorList.value = res.data

        //将数据存储到store
        floor.value = res.data
    }
}




onMounted(()=>{
    // getBannerList()
    getFloorList()
})

</script>

<script lang="ts">
export default {
    name: 'VHome'
}
</script>

<style lang="scss" scoped></style>